<template>
  <div id="app">  
    <header class="container-fluid clearfix gblogo">
      <!-- <div class="logo">
        <img alt="Vue logo" src="./assets/logo.jpg">
      </div>       -->
      <div class="routeLink">
        <router-link to="/" >首页</router-link>
        <router-link v-show="!user" to="/login" >登录</router-link>
        <router-link v-show="!user" to="/register" >注册</router-link>
        <router-link v-show="user" to="/addPost" >发帖</router-link>
        <a v-show="user" @click="logout" href="javascript:" >登出</a>
        <router-link id="userButton" v-if="user" :to="'/users/' + user.id">{{user.name}}</router-link>
        
      </div>     
      
    </header>
    <router-view></router-view>
  </div>
</template>



<script>
import VueRouter from"vue-router"
import Home from "./components/home.vue"
import Login from "./components/login.vue"
import Register from "./components/register.vue"
import Post from "./components/post.vue"
import AddPost from "./components/addPost.vue"
import UserPage from "./components/userPage.vue"
import Vue from 'vue';

Vue.use(VueRouter)
const routes = [
    {path:"/",component:Home},
    {path:"/login",component:Login},
    {path:"/register",component:Register},
    {path:"/addPost",component:AddPost},
    {path:"/posts/:postId",component:Post},
    //从post组件的this.$route.params.postId能读到这个属性的数值
    {path:"/users/:userId",component:UserPage},
  ]




const router = new VueRouter({
  routes
})

export default {
  name: 'app',
  components: {
    Home
  },
  router,
  data(){
    return {
      user:null
    }
  },
  methods:{

    async logout(){
      this.user = null
      await this.$http.get("/logout")
      this.$router.push("/")
    }

  },
  async beforeCreate(){
    let user = await this.$http.get("/api/userInfo")
    this.user = user.data
    console.log("beforecreated 开始运行")
  }

}
</script>

<style>
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: justify; */
  color: #172029;
  margin-top: 60px; 
  background-color: #fff;
}

.gblogo {
  background-image: url(./assets/logo.jpg);
  height: 60px;
}
#app header{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 2px 2px #93e7a8;
  background-color: white;
}


div.logo{
  float: left;
  margin-left: -15px;
}


div.routeLink{
  float: right;
  margin-top: 18px;
  font-size: 20px;
}

#app .logo img{
  /* width: 80px; */
  /* height: 60px;   */
  width: 100%;
  height: 60px;;
}

div.routeLink a{
  color:white;
  display: in-line-block;
  background-color: #201406;
  margin-right: 5px;
  padding: 5px;
}

#userButton{
  border-radius: 999px;
  padding:5px 14px 5px 14px;
}

@media (max-width: 760px){
  #app .logo img{
    width: 60px;
    height: 45px;  
  }

  div.routeLink {
    font-size: 14px;
    margin-top: 10px;
  }
  #userButton{
    border-radius: 999px;
    padding:5px 10px 5px 10px;
  }
}

</style>



